<template>
  <div class="dataSource">
    <el-divider content-position="left">
      <i></i>数据来源
    </el-divider>
    <div class="tabBox">
      <el-tabs v-model="editableTabsValue" type="card">
        <el-tab-pane v-for="(item) in readerDataSource" :key="item.id" :label="item.ruleName" :name="item.id">
          <znxd-list-modify v-model="item.fields" :formColumn="column" :initData="item.tableData"></znxd-list-modify>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { getDictionSelf } from "@/utils/config.js";
import { deepCopy } from "@/utils/data.js";

export default {
  components: {},
  data() {
    return {
      readerDataSource: {},
      editableTabsValue: "",
      column: [
        {
          align: "center",
          name: "columnName",
          label: "字段名称"
        },
        {
          align: "center",
          name: "columnMemo",
          label: "字段别名"
        },
        {
          align: "center",
          name: "columnType",
          label: "字段类型"
        },
        {
          align: "center",
          name: "columnLong",
          label: "字段长度"
        }
      ]
    };
  },
  props: {
    initData: Object,
    mode: String
  },
  watch: {
    readerDataSource: {
      deep: true,
      handler: function (val) {
        // console.log("readerDataSource", val);
        this.$emit("input", val);
      }
    },
    initData: {
      deep: true,
      handler: async function (obj) {
        console.log("init 1", this.editableTabsValue)
        this.readerDataSource = deepCopy(obj.readerDataSource);
        this.readerDataSource.map((x, index) => {
          this.readerDataSource[index].tableData = x.fields;
        })

        if (this.editableTabsValue === "0" && obj.readerDataSource && obj.readerDataSource.length > 0) {
          this.editableTabsValue = obj.readerDataSource[0].id
        }
      }
    }
  },
  methods: {
    // 校验数据
    validateForm() {
      let flag = true;
      if (this.readerDataSource.length === 0) {
        this.$message({
          message: "数据来源为空",
          type: "error"
        });
        flag = false;
      }
      return flag;
    }
  },
  mounted() {
    // if (this.initData && this.initData.readerDataSource) {
    //   this.readerDataSource = deepCopy(this.initData.readerDataSource);
    //   this.readerDataSource.forEach((x, index) => {
    //     x.tableData = x.fields;
    //   })
    //   if (this.editableTabsValue === "" && this.initData.readerDataSource && this.initData.readerDataSource.length > 0) {
    //     this.editableTabsValue = this.initData.readerDataSource[0].id
    //   }
    // }
  }
}
</script>
<style lang="scss" scoped>
.dataSource {
  .el-divider__text.is-left {
    left: 0;
    display: flex;
    flex-direction: row;
    > i {
      display: block;
      width: 3px;
      height: 14px;
      background: #128df3;
      margin-right: 5px;
    }
  }

  .tabBox {
    margin: 20px 0;
  }
}
</style>
